<template>
  <div class="hotal">
    <div class="card-title">
      <div class="title-font">酒店<span class="orange">推荐</span></div>
      <ul class="city">
        <!-- <li>上海</li> -->
        <li
          v-for="item in [...citys, ...trendsCity]"
          :key="item.cityId"
          :class="{ active: item.cityId == curCityId }"
          @click="selectCity(item.cityId)"
        >
          {{ item.label }}
        </li>
      </ul>
    </div>
    <div class="hotal-card">
      <div class="leftArrow" v-show="arrow == 'right' && hotalList.length > 3" @click="lookLeft">
        <el-icon><ArrowLeft /></el-icon>
      </div>
      <div class="row-view">
        <div class="row-box" ref="eleRow">
          <div class="row-item" v-for="(item, index) in hotalList" :key="index">
            <el-card :body-style="{ padding: '0px' }">
              <div class="imageBox">
                  <img :src="item.img" class="image" @click="goDetail" />
              </div>
              <div class="hotelInfo">
                <div class="hotelName">
                  {{ item.hotelName }}
                </div>
                <div class="hotalStart">
                  <img :src="item.starIcon" alt="" />
                </div>
                <div class="hotalScore">
                  <span class="score"
                    >{{ item.comment.score }}<em> / 5</em></span
                  >
                  <span class="desc">{{ item.comment.desc }}</span>
                </div>
                <div class="hotalPrice">
                  <span>{{ item.comment.num }}条点评</span>
                  <span>￥{{ item.price }}</span>
                </div>
              </div>
            </el-card>
          </div>
        </div>
      </div>
      <div class="rightArrow" v-show="arrow == 'left' && hotalList.length > 3" @click="lookRight">
        <el-icon><ArrowRight /></el-icon>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { ArrowLeft, ArrowRight } from "@element-plus/icons-vue";
import type { FormInstance } from "element-plus";

import { getRecommendHotal } from '@/api/home'

let hotalList:any = ref([]);
const ele: any = ref();
const arrow = ref("left");
const eleRow = ref<FormInstance>();

const citys = ref([
  {
    label: "上海",
    cityId: "2",
  },
  {
    label: "北京",
    cityId: "1",
  },
  {
    label: "广州",
    cityId: "32",
  },
]);

const trendsCity = ref([{
    label: "杭州",
    cityId: "17",
  }])

const curCityId = ref("2");

const goDetail = () => {};

const selectCity = (val:any) => {
  curCityId.value = val
  lookLeft()
  getHotalById()
}

// 获取酒店
const getHotalById = async () => {
  hotalList.value =  await getRecommendHotal({cityId: curCityId.value})
}

// 视口左移
const lookLeft = () => {
  ele.value.style.transform = "translateX(0px)";
  arrow.value = "left";
};

// 视口右移
const lookRight = () => {
  ele.value.style.transform = "translateX(-732px)";
  arrow.value = "right";
};

onMounted(async () => {
  ele.value = eleRow.value;
  getHotalById()
});
</script>

<style scoped lang="scss">
.hotal {
  margin-top: 28px;
  .card-title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    .title-font{
      font-size: 24px;
    }
    .orange {
      color: #ff7700;
    }
    ul {
      list-style: none;
      margin: 0;
      font-size: 14px;
      li {
        display: inline-block;
        margin-left: 12px;
        width: 60px;
        height: 32px;
        line-height: 32px;
        border-radius: 5px;
        text-align: center;
        cursor: pointer;
      }
      .active {
        background-color: #e6f3fe;
      }
    }
  }

  .hotal-card {
    width: 722px;
    position: relative;
    .leftArrow {
      position: absolute;
      top: 40%;
      left: -10px;
      z-index: 1;
      width: 40px;
      height: 40px;
      line-height: 47px;
      text-align: center;
      background-color: rgba(255, 255, 255, 0.8);
      box-shadow: 0px 4px 16px 1px rgba(0, 0, 0, 0.1);
      border-radius: 5px;
      font-size: 20px;
      cursor: pointer;
    }
    .rightArrow {
      position: absolute;
      top: 40%;
      right: -10px;
      z-index: 1;
      width: 40px;
      height: 40px;
      line-height: 47px;
      text-align: center;
      background-color: rgba(255, 255, 255, 0.8);
      box-shadow: 0px 4px 16px 1px rgba(0, 0, 0, 0.1);
      border-radius: 5px;
      font-size: 20px;
      cursor: pointer;
    }
    .row-view {
      overflow: hidden;
      .row-box {
        display: inline-flex;
        padding: 2px;
        transition: 1s;
        .row-item {
          display: inline-block;
          width: 229px;
          margin-right: 15px;
        }
      }
    }
    .el-card {
      // width: 235px;
      width: 100%;
      height: 100%;
      .imageBox{
        width: 100%;
        height: 160px;
        overflow: hidden;
        .image {
          width: 100%;
          height: 100%;
          display: block;
          cursor: pointer;
          transition: 0.5s;
          &:hover {
            transform: scale(1.1);
          }
        }
      }
      
      .hotelInfo {
        padding: 12px;
        .hotelName {
          white-space: nowrap;
          word-wrap: break-word;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .hotalStart {
          img {
            height: 12px;
          }
        }
        .hotalScore {
          display: inline-block;
          .score {
            font-size: 16px;
            color: #fff;
            background-color: #007fe9;
            border-radius: 5px;
            padding: 3px 5px;
            em {
              margin-left: 1px;
              color: #99cefb;
              font-size: 12px;
              line-height: 16px;
              font-style: normal;
              font-weight: normal;
            }
          }
          .desc {
            margin-left: 4px;
            color: #0086f6;
            font-size: 14px;
            line-height: 18px;
          }
        }
        .hotalPrice {
          color: #666;
          font-size: 14px;
          margin-top: 6px;
          display: flex;
          justify-content: space-between;
        }
      }
    }
  }
}
</style>
